<template>
  <div class="login-wrap">
    <div class="login-title">
      宏亚供需链管理系统
    </div>
    <div class="ms-login">
      <el-form :model="form" :rules="rules" ref="form" label-width="96px" label-position="left">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" @keyup.enter.native="login('form')"></el-input>
        </el-form-item>
      </el-form>
      <div class="login-btn">
        <el-button type="primary" @click="login('form')">登入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "login",
      data:function () {
        return{
          form:{
            username:"",
            password:"",
          },
          rules:{
            username:[{required:true,message:"请输入用户名",trigger:'blur'}],
            password:[{required:true,message:"请输入密码",trigger:'blur'}]
          }
        }
      },
      methods:{
        login(form) {
          this.$refs[form].validate((valid) => {
            if (valid) {
              let params={
                "username":this.form.username,
                "password":this.form.password
              }
              localStorage.setItem("psw",this.form.password)
              this.$http.post("/hnhyscms_ws/users/loginUsers", params,{emulateJSON:true}).then(
                success => {
                  if (success.data.length != 0) {
                    console.log(success.data)
                    localStorage.setItem("username",success.data.username)
                    localStorage.setItem("phone",success.data.psw)
                    localStorage.setItem("remarks",success.data.remarks)
                    localStorage.setItem("status",success.data.status)
                    this.$message.info("登陆成功")
                    this.$router.push({
                      path:"/homepage"
                    })
                  }else {
                    this.$message.error("用户名不存在或用户名密码不匹配")
                  }
                }
              ).catch(function (error) {
                console.log(error);
                this.errmessages=error;
              })
            }
          })
        },
      }
    }
</script>

<style scoped>
  .login-wrap{
    position: fixed;
    height:100%;
    width:100%;
    background-size: cover;
    background-image: linear-gradient(left, #008ec9, #00ffdc);
    margin:-3.89% 0 0 -0.5%;
  }
  .ms-login{
    position: relative;
    left:50%;
    top:50%;
    width:300px;
    height:270px;
    margin:-375px 0 0 -190px;
    padding:40px;
    border-radius: 5px;
    background: #fff;
  }
  .login-title{
    position: relative;
    font-size: 30px;
    text-align: center;
    line-height:200px;
    color: #ffffff;
  }
  .login-btn button{
    width:100%;
    height:36px;
  }
</style>
